import { Card, Form, Input, Checkbox, Button, message } from "antd"
import logo from '@/assets/logo.png'
import './index.scss'
import { useStore } from "@/store"
import { useNavigate } from "react-router-dom"

function Login () {
  const { loginStore } = useStore()
  const navigate = useNavigate()
  //注意async 与 await 搭配：https://baijiahao.baidu.com/s?id=1669617690104951286&wfr=spider&for=pc
  //async修饰的函数会返回一个Promise,而await修饰的方法如果返回的是Promise对象，则会阻塞，直到完成这个方法
  async function onFinish (values) {
    console.log(values)
    //values:放置的是所有表单项中用户输入的内容
    //todo:登录
    await loginStore.getToken({
      mobile: values.username,
      code: values.password
    })
    //跳转首页
    navigate('/', { replace: true })
    //提示用户成功登录
    message.success("登录成功")

  };
  // function onFinishFailed (errorInfo) {
  //   console.log('Failed:', errorInfo)
  // };
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        {/* validateTrigger 子项用到的触发事件 需要在Form中声明一下 */}
        <Form
          initialValues={{
            remember: true,
          }}
          validateTrigger={['onBlur', 'onChange']}
          onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
              // {
              //   pattern: '/^1[3-9]\d{9}$/',
              //   message: '请输入正确的手机号!',
              //   //失去焦点时触发验证
              //   validateTrigger: 'onBlur'
              // }
            ]}
          >
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              }, {
                len: 6,
                message: '请输入6位数密码',
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item
            name="remember"
            valuePropName="checked"
          >
            <Checkbox className="login-checkbox-label">
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>

          <Form.Item>
            {/* <!-- 渲染Button组件为submit按钮 --> */}
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>

      </Card>
    </div>
  )
}
export default Login